<template>
  <div class="app-container">
    <!-- 顶部卡片统计 -->
<!--    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="card-header">
            <span>MQTT数据</span>
            <el-icon class="icon"><User /></el-icon>
          </div>
          <div class="card-body">
            <div class="number">{{ stats.userCount }}</div>
            <div class="trend">
              <span class="label">+{{ stats.userGrowth }}%</span>
              <trend-chart
                :data="stats.userTrend"
                :height="30"
                :width="100"
                stroke="#409EFF"
                fill="rgba(64,158,255,0.1)"
              />
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="card-header">
            <span>HTTP数据任务</span>
            <el-icon class="icon"><ChatDotRound /></el-icon>
          </div>
          <div class="card-body">
            <div class="number">{{ stats.questionCount }}</div>
            <div class="trend">
              <span class="label">+{{ stats.questionGrowth }}%</span>
              <trend-chart
                :data="stats.questionTrend"
                :height="30"
                :width="100"
                stroke="#F56C6C"
                fill="rgba(245,108,108,0.1)"
              />
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="card-header">
            <span>OLTP数据任务</span>
            <el-icon class="icon"><Check /></el-icon>
          </div>
          <div class="card-body">
            <div class="number">{{ stats.solvedCount }}</div>
            <div class="trend">
              <span class="label">+{{ stats.solvedGrowth }}%</span>
              <trend-chart
                :data="stats.solvedTrend"
                :height="30"
                :width="100"
                stroke="#67C23A"
                fill="rgba(103,194,58,0.1)"
              />
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="card-header">
            <span>任务异常统计</span>
            <el-icon class="icon"><Star /></el-icon>
          </div>
          <div class="card-body">
            <div class="satisfaction">
              <el-progress 
                type="dashboard"
                :percentage="stats.satisfaction"
                :color="'#6366f1'"
                :width="80"
              />
              <div class="label">+{{ stats.satisfactionGrowth }}%</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
 -->
    <!-- 图表区域 -->
<!--    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="16">
        <el-card class="chart-card">
          <div class="card-header">
            <span>分析概况</span>
            <div class="header-right">
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="上周">上周</el-radio-button>
                <el-radio-button label="本周">本周</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="chart-container">
            <bar-chart :data="chartData" height="300px" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="chart-card">
          <div class="card-header">
            <span>执行异常信息</span>
          </div>
          <div class="progress-list">
            <div v-for="(item, index) in progressData" :key="index" class="progress-item">
              <div class="progress-info">
                <span>周{{ item.day }}</span>
                <span>{{ item.percentage }}%</span>
              </div>
              <el-progress 
                :percentage="item.percentage"
                :color="item.color"
                :show-text="false"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { User, ChatDotRound, Check, Star } from '@element-plus/icons-vue';
import TrendChart from './components/TrendChart.vue';
import BarChart from './components/BarChart.vue';

// 统计数据
const stats = ref({
  userCount: 36000,
  userGrowth: 82,
  userTrend: [30, 40, 35, 50, 49, 60, 70, 91, 125, 160],
  questionCount: 16580,
  questionGrowth: 70,
  questionTrend: [20, 40, 20, 40, 20, 40, 20, 40, 20, 40],
  solvedCount: 16499,
  solvedGrowth: 99,
  solvedTrend: [20, 30, 40, 50, 60, 70, 80, 90, 100, 110],
  satisfaction: 100,
  satisfactionGrowth: 100,
});

// 时间范围选择
const timeRange = ref('本周');

// 柱状图数据
const chartData = ref({
  labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  datasets: [
    {
      label: '商家人数',
      data: [2000, 3000, 4000, 5000, 6000, 7000, 8000],
      backgroundColor: '#409EFF',
    },
    {
      label: '提问数量',
      data: [1800, 2800, 3800, 4800, 5800, 6800, 7800],
      backgroundColor: '#F56C6C',
    }
  ]
});

// 进度条数据
const progressData = ref([
  { day: '一', percentage: 85.1, color: '#409EFF' },
  { day: '二', percentage: 81.2, color: '#67C23A' },
  { day: '三', percentage: 85.9, color: '#E6A23C' },
  { day: '四', percentage: 89.1, color: '#F56C6C' },
  { day: '五', percentage: 94.3, color: '#909399' },
  { day: '六', percentage: 96.2, color: '#6366f1' },
  { day: '日', percentage: 100, color: '#10B981' },
]);
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: var(--el-bg-color-page);

  .stat-card {
    height: 100%;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;
      border-bottom: 1px solid var(--el-border-color-light);
      
      .icon {
        font-size: 20px;
        color: var(--el-text-color-secondary);
      }
    }

    .card-body {
      padding: 20px;

      .number {
        font-size: 28px;
        font-weight: bold;
        color: var(--el-text-color-primary);
        margin-bottom: 10px;
      }

      .trend {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .label {
          color: #67C23A;
          font-size: 14px;
        }
      }

      .satisfaction {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .label {
          margin-top: 10px;
          color: #67C23A;
          font-size: 14px;
        }
      }
    }
  }

  .chart-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;
      border-bottom: 1px solid var(--el-border-color-light);
    }

    .chart-container {
      padding: 20px;
      height: 300px;
    }

    .progress-list {
      padding: 20px;
      
      .progress-item {
        margin-bottom: 20px;

        .progress-info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
          color: var(--el-text-color-regular);
        }
      }
    }
  }
}
</style>